<template>
  <div class="nav">
    <ul class="outer_nav">
      <li v-for="(item,index) in navList" :key="index" :class="{open:open == index}">
        <a href="JavaScript:;" @click="open=index" class="outer_box">
          <svg class='icon' aria-hidden='true'>
            <use :xlink:href='index == open ? item.icon : item.icon + "-copy"'></use>
          </svg>
          <span>{{item.title}}</span>
        </a>
        <transition name="menu">
          <ul class="in_nav" v-show="index == open">
            <li v-for="(t,i) in item.children" :key="i">
              <router-link  :to="t.url + '?index=' + index" active-class="active" class="in_box">
                <svg class='icon' aria-hidden='true'>
                  <use :xlink:href='t.icon'></use>
                </svg>
                <span>{{t.title}}</span>
              </router-link>
            </li>
          </ul>
        </transition>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Nav',

  data() {
    return {
      // 导航菜单
      navList: [
        {title:'首页管理',icon:'#icon-index1',children: [
          {title:'设置',url:'/Admin/home/setting',icon:'#icon-shezhi'}
        ]},
        {title:'文章管理',icon:'#icon-wenzhang',children: [
          {title:'文章审核',url:'/Admin/home/audit',icon:'#icon-shenhe'},
          {title:'文章操作',url:'/Admin/home/article',icon:'#icon-gengduocaozuo'}
        ]},
        {title:'话题管理',icon:'#icon-chaojihuati',children: [
          {title:'举报记录',url:'/Admin/home/report',icon:'#icon-jubao'},
          {title:'话题操作',url:'/Admin/home/topics',icon:'#icon-gengduocaozuo'}
        ]}
      ],
      open:-1 // 菜单激活索引
    };
  },

  mounted() {
    this.init()
  },

  methods: {
    init(){
      let index = this.$route.query.index || -1
      this.open = index
    }
  },
};
</script>

<style scoped>
.nav{
  background-color: #ececec;
  text-align: center;
  position: absolute;
  top: 80px;
  left: 0;
  bottom: 0;
  border-right: 1px solid gray;
}
.outer_nav > li{
  width: 120px;
  transition: all .3s;
  border-bottom: 1px solid gray;
  padding: 10px 0;
}
.nav li a{
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}
.outer_nav .open .outer_box span{
  color: black;
}
.outer_box span{
  font-size: 1rem;
  color: gray;
}
.in_box{
  font-size: .8rem;
  color: gray;
}
.in_box:hover{
  color: red;
}
.in_nav{
  width: 100%;
  margin-top: 10px;
}
.in_nav > li{
  height: 40px;
  line-height: 40px;
}
.menu-enter,.menu-leave-to{
  opacity: 0;
  transform: translateX(-20px);
}
.menu-enter-active,.menu-leave-active{
  transition: all .3s;
}
.menu-enter-to,.menu-leave{
  opacity: 1;
  transform: translateX(0px);
}
.active{
  color: red;
  background-color: gray;
}
</style>